<template>
<div>
  <el-container>
    <el-main>
      <div>
        <el-row :gutter="10">
          <el-col :span="10">
            <img src="01.png" style="width: 100%;height: 100%;" >
          </el-col>
          <el-col :span="14">
            <el-menu @select="selectMenu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
              <el-row>
                <el-col :span="12">
                  <el-menu-item index="1"><h2 style="font-family: 微软雅黑">用户登录</h2></el-menu-item>
                </el-col>
                <el-col :span="12">
                  <el-menu-item index="2"><h2>用户注册</h2></el-menu-item>
                </el-col>
              </el-row>
            </el-menu>
            <el-form v-if="menu==1" style="width: 100%;height: 100%;">
              <h2>欢迎登陆</h2>
              <el-form-item label="用户名">
                <el-input v-model="loginCust.username" clearable type="text" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密&#12288;码">
                <el-input v-model="loginCust.password" clearable show-password @keydown.enter="login" type="password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="login" :disabled="loginCust.agree==false" type="primary">登陆</el-button>
              </el-form-item>
              <el-form-item>
                <el-checkbox @click="loginAgree" :value="1">阅读并接受<a href="#">《用户协议》</a></el-checkbox>
              </el-form-item>
            </el-form>
            <el-form v-if="menu==2" style="width: 100%;height: 100%;">
              <h2>欢迎注册</h2>
              <el-form-item label="用户名">
                <el-input v-model="regCust.username" clearable type="text" placeholder="请设置用户名"></el-input>
              </el-form-item>
              <el-form-item label="密&#12288;码">
                <el-input v-model="regCust.password" clearable show-password type="password" placeholder="请设置密码"></el-input>
              </el-form-item>
              <el-form-item label="密&#12288;码">
                <el-input v-model="regCust.rePassword" @change="uniform" clearable show-password type="password" placeholder="请再输入一次"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button :disabled="uniformed==false || regCust.agree==false" @click="reg" type="primary">注册</el-button>
              </el-form-item>
              <el-form-item>
                <el-checkbox @click="regAgree">阅读并接受<a href="#">《用户协议》</a></el-checkbox>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</div>
</template>

<script setup>

import {ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import router from "@/router";

const loginCust=ref({agree:false})
const regCust=ref({agree:false})
const menu=ref(1)
const selectMenu = (index) => {
  menu.value=index
}
const login = () => {
  console.log(loginCust.value)
  if (!loginCust.value.agree){
    ElMessage.error("请先阅读并同意用户协议")
    return
  }
  axios.post(BASE_URL+'/v1/customer/login',loginCust.value)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success("登陆成功")
          router.push('/custHome')
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const reg = () => {
  console.log(regCust.value)
  axios.post(BASE_URL+'/v1/customer/save',regCust.value)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success("注册成功")
          menu.value=1
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const uniformed=ref(false)
const uniform = () => {
  if (regCust.value.password!=regCust.value.rePassword){
    ElMessage.error("两次输入的密码必须一致")
    uniformed.value=false
  }else {
    uniformed.value=true
  }
}
const loginAgree = () => {
  loginCust.value.agree=!loginCust.value.agree
}
const regAgree = () => {
  regCust.value.agree=!regCust.value.agree
}
</script>

<style scoped>

</style>